import { Meta } from "@storybook/addon-docs";
import { Markdown } from "@storybook/blocks";

import Sparrow1 from "../assets/logos-sparrow1.svg";
import Sparrow2 from "../assets/logos-sparrow2.svg";
import Sparrow3 from "../assets/logos-sparrow3.svg";
import gradientIcon from "../assets/logos-sparrow4.svg";
import whiteIcon from "../assets/logos-sparrow5.svg";
import circularGradient from "../assets/logos-sparrow6.svg";
import squareGradient from "../assets/logos-sparrow7.svg";
import squareIcon from "../assets/logos-sparrow8.svg";
import logoType from "../assets/logos-sparrow9.svg";
import squareGradientLogotype from "../assets/logos-sparrow10.svg";
import blueIconWhiteLogotype from "../assets/logos-sparrow11.svg";
import gradientIconLogotype from "../assets/logos-sparrow12.svg";
import edgeOnlyIcon from "../assets/logos-sparrow13.svg";
import adminOnlyIcon from "../assets/logos-sparrow14.svg";
import outlineOnlyIcon from "../assets/logos-sparrow15.svg";

<Meta title="Components/Logos/Documentation" />

# Logos

# Introduction

The Sparrow logo system is designed to represent the brand across various platforms and contexts.
The system includes primary, secondary, and functional variations to ensure flexibility while
maintaining visual consistency and brand integrity.

## Logo Components

<div className="logo-component">
  <img src={Sparrow1} alt="Sparrow Icon" className="icon" />
  <div className="component-details">
    <strong>Icon/Mark:</strong> The Sparrow bird symbol represents agility,
    speed, and precision.
  </div>
</div>

<div className="logo-component">
  <img src={Sparrow2} alt="Sparrow Logotype" className="logotype" />
  <div className="component-details">
    <strong>Logotype:</strong> The brand name "Sparrow" styled in a modern,
    sans-serif typeface.
  </div>
</div>

<div className="logo-component">
  <img src={Sparrow3} alt="Sparrow Tagline Example" className="tagline" />
  <div className="component-details">
    <strong>Tagline/Functional Labels</strong> (Optional): Variants with
    descriptive text like "Admin" or "Edge."
  </div>
</div>

# Logo Variations

<div className="table-container">
  <table className="logo-table">
    <thead>
      <tr>
        <th>Logo Name</th>
        <th>Logo</th>
        <th>Usage</th>
        <th>Description</th>
      </tr>
    </thead>
    <tbody>
      <tr>
        <td>Gradient-only-icon</td>
        <td>
          <img
            src={gradientIcon}
            alt="Gradient Sparrow Icon"
            className="logo-image"
          />
        </td>
        <td>For application headers</td>
        <td>
          Gradient-colored Sparrow icon without text. Use in areas like
          navigation bars or compact spaces where text is unnecessary.
        </td>
      </tr>
      <tr>
        <td>White-only-icon</td>
        <td>
          <img
            src={whiteIcon}
            alt="White Sparrow Icon"
            className="logo-image"
          />
        </td>
        <td>For branding assets and minimalistic design elements</td>
        <td>
          White Sparrow icon with no background. Ideal for monochrome branding,
          watermarks, or high-contrast designs.
        </td>
      </tr>
      <tr>
        <td>Circular-gradient-icon</td>
        <td>
          <img
            src={circularGradient}
            alt="Circular Gradient Icon"
            className="logo-image"
          />
        </td>
        <td>For profile pictures or avatars</td>
        <td>
          Sparrow icon enclosed in a circular gradient background. Best suited
          for user avatars, team logos, or small, rounded placeholders.
        </td>
      </tr>
      <tr>
        <td>Square-gradient-icon</td>
        <td>
          <img
            src={squareGradient}
            alt="Square Gradient Icon"
            className="logo-image"
          />
        </td>
        <td>For app icons and favicon use</td>
        <td>
          Sparrow icon enclosed in a square with a gradient background. Designed
          specifically for app launch icons and web favicons.
        </td>
      </tr>
      <tr>
        <td>Square-ai-icon</td>
        <td>
          <img src={squareIcon} alt="Square AI Icon" className="logo-image" />
        </td>
        <td>For AI-related services</td>
        <td>
          A specialized icon combining the Sparrow with sparkles, representing
          innovation or artificial intelligence branding.
        </td>
      </tr>
      <tr>
        <td>Logo-type</td>
        <td>
          <img src={logoType} alt="Sparrow Logotype" className="logo-image" />
        </td>
        <td>For branding wordmarks across applications and websites</td>
        <td>
          The wordmark "Sparrow" in Gliroy Bold font. Represents the brand name
          without the Sparrow icon for select formats like banners.
        </td>
      </tr>
      <tr>
        <td>Sq-gradient-icon-logotype</td>
        <td>
          <img
            src={squareGradientLogotype}
            alt="Square Gradient Icon with Logotype"
            className="logo-image"
          />
        </td>
        <td>For website headers or key landing pages</td>
        <td>
          Combination of the square-gradient-icon and the wordmark "Sparrow".
          Used prominently in website headers or primary branding.
        </td>
      </tr>
      <tr>
        <td>Blue-icon-white-logotype</td>
        <td>
          <img
            src={blueIconWhiteLogotype}
            alt="Blue Icon White Logotype"
            className="logo-image"
          />
        </td>
        <td>For branding assets with a white wordmark</td>
        <td>
          Blue gradient Sparrow icon paired with "Sparrow" in white text.
          Suitable for high-contrast designs or dark mode branding.
        </td>
      </tr>
      <tr>
        <td>Gradient-icon-logotype</td>
        <td>
          <img
            src={gradientIconLogotype}
            alt="Gradient Icon Logotype"
            className="logo-image"
          />
        </td>
        <td>For high-visibility branding purposes</td>
        <td>
          Combination of the gradient Sparrow icon and the "Sparrow" wordmark in
          blue gradient text.
        </td>
      </tr>
      <tr>
        <td>Edge-only-icon</td>
        <td>
          <img src={edgeOnlyIcon} alt="Edge Only Icon" className="logo-image" />
        </td>
        <td>For support-related features or pages</td>
        <td>
          Sparrow icon with the "Edge" text in Inter Semi Bold font. Intended
          for specific functionalities tied to the Edge branding.
        </td>
      </tr>
      <tr>
        <td>Admin-only-icon</td>
        <td>
          <img
            src={adminOnlyIcon}
            alt="Admin Only Icon"
            className="logo-image"
          />
        </td>
        <td>For admin dashboards</td>
        <td>
          Sparrow icon with the "Admin" text in Inter Semi Bold font. Suitable
          for interfaces requiring clear differentiation for admins.
        </td>
      </tr>
      <tr>
        <td>Outline-only-icon</td>
        <td>
          <img
            src={outlineOnlyIcon}
            alt="Outline Only Icon"
            className="logo-image"
          />
        </td>
        <td>For subtle backgrounds or watermarks</td>
        <td className="table-body">
          An outlined version of the Sparrow icon. Ideal for backgrounds,
          watermarks, or print materials needing minimalistic branding.
        </td>
      </tr>
    </tbody>
  </table>
</div>

<style jsx>{`
  .table-container {
    overflow-x: auto;
    color: #ffffff;
  }
  .table-body {
    color: #ffffff;
  }

  .table-container h1 {
    color: #ffffff;
  }

  .logo-table {
    width: 100%;
    border-collapse: collapse;
    background-color: #2c2c2e;
    color: #ffffff;
  }

  .logo-table th,
  .logo-table td {
    padding: 1rem;
    border: 1px solid #ffffff;
    background-color: #ffffff;
    text-align: left;
    color: #ffffff;
  }

  .logo-table td img {
    background-color: #2c2c2e;
  }

  .logo-table th {
    background-color: #ffffff;
    font-weight: 600;
  }

  .logo-image {
    width: 48px;
    height: 48px;
    object-fit: contain;
  }
`}</style>

{/* Styles can be included here or in a separate CSS module */}

<style jsx>{`
  .logo-component {
    display: flex;
    align-items: flex-start;
    margin-bottom: 1.5rem;
    gap: 1rem;
  }

  .icon,
  .logotype,
  .tagline {
    width: 38px;
    height: 38px;
    object-fit: contain;
    background-color: #2c2c2e;
  }

  .component-details {
    flex: 1;
  }
`}</style>
